<template>
	<view class="addressList">
		<radio-group @change="radioChange">
			<view class="item" v-for="(dt,index) in (lists || [])" :key="dt.id">
				<view class="rd">
					<radio :value="dt.id.toString()" :checked="dt.id == curId" />
				</view>
				<view class="info">
					<view class="name">
						<text>{{dt.receiveName}}</text>
						<text class="phone">{{dt.phone}}</text>
					</view>
					<view class="address">{{dt.province}} {{dt.city}} {{dt.county}} {{dt.address}}</view>
				</view>
				<view class="ricon" @click="goEdit(index)">
					<image class="img" src="/static/imgs/edit.png" mode="widthFix"></image>
				</view>
			</view>
		</radio-group>
		<empty  v-if="lists && lists.length<1"/>
		<view class="addBtnbox">
			<view class="btn" v-if="curId" @click="cfCheck">确认</view>
			<view class="btn" v-else @click="goPage">添加地址</view>
		</view>
	</view>
</template>

<script>
	import {mapGetters} from "vuex"
	import {getAddressList} from '@/api/index.js'
	import user from "@/common/user.js"
	import empty from "@/components/empty/empty.vue"
	export default {
		components:{
			empty
		},
		data() {
			return {
				curId: '',
				lists:''
			}
		},
		onShow() {
			this.getList()
		},
		created() {
			
		},
		methods: {
			getList(){
				getAddressList({
					userId:user.getUserId()
				}).then(res =>{
					this.lists = res || []
				})
			},
			radioChange: function(evt) {
				this.curId = evt.detail.value
			},
			goPage(){
				uni.navigateTo({
					url:'/pages/integral/mall/address/add/add'
				})
			},
			goEdit(index){
				let item = this.lists[index]
				delete item.createTime
				delete item.updateTime
				uni.navigateTo({
					url:'/pages/integral/mall/address/add/add?edata='+JSON.stringify(item)
				})
			},
			cfCheck(){
				const selectAddress = this.lists.find(item=>item.id == this.curId)
				this.$store.commit('base/set_buyInfo',{addressInfo:selectAddress})
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.addressList{
		padding: 10rpx 20rpx 30rpx 20rpx;
		font-size: 28rpx;
		line-height: normal;
		.item{
			display: flex;
			border-bottom: 1px solid #d7d4d4;
			padding: 20rpx 10rpx;
			.info{
				flex: 1;
				.name{
					.phone{
						padding: 0 0 0 30rpx;
					}
				}
				.address{
					padding: 10rpx 0 0 0;
				}
			}
			.ricon{
				display: flex;
				align-items: center;
				padding: 0 0 0 20rpx;
				.img{
					display: block;
					width: 40rpx;
				}
			}
			.rd{
				display: flex;
				align-items: center;
				padding: 0 10rpx 0 0;
			}
		}
		.addBtnbox{
			position:fixed;
			z-index: 1000;
			left: 0;
			bottom: 0;
			box-sizing:border-box;
			width: 100%;
			padding: 20rpx 100rpx;
			background-color: #fff;
			.btn{
				display: flex;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
				color: #fff;
				font-size: 30rpx;
				border: none;
				height: 80rpx;
				border-radius: 40rpx;
				background-image: linear-gradient(#388cec, #2778d5);
				width: 100%;
				margin: 0 auto 0 auto;
			}
		}
	}
</style>
